<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>初体验react使用</title>
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
    <script src="./js/babel.js"></script>
  </head>
  <body>
    <div id="root"></div>

    <script type="text/babel">
      // jsx语法中不能使用for/forEach/while循环语句，但它可以解析数组然后在转换后显示出来
      // 在jsx中语法中，列表渲染使用的是map来完成,且建议要加key
      // let users = ['张三', '李四', '王五', '赵六']
      // let users = [<h3>张三</h3>, '李四', '王五', '赵六']
      let users = ['张三', '李四', '王五', '赵六']

      const vnode = (
        <div>
          <ul>
            {
              // 列表渲染建议去添加一个唯一的key值，用来提升数据的比对性能
              // key最好不要用数组的索引
              users.map((item, index) => (
                <li key={index}>{item}</li>
              ))
            }
          </ul>
        </div>
      )

      ReactDOM.createRoot(document.getElementById('root')).render(vnode)
    </script>
  </body>
</html>
